<template>
  <a-layout-content style="padding: 0 20px">
    <a-layout style="background: #fff;height: 100%">
      <a-layout-sider width="200" style="background: #fff;height: 100%">
        <a-menu
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          style="height: 100%"
          @click="menuClick"
        >
          <a-menu-item v-for="(item, idx) in routerArr" :key="'sub' + idx">
            <user-outlined />
            {{ item.title }}
            <a-sub-menu
              v-for="(sub, idx1) in item.children"
              v-if="item.children && item.children.length"
              :key="idx1"
            >
              {{ sub.name }}
            </a-sub-menu>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-content
        :style="{
          padding: '0 24px',
          minHeight: '280px',
          overflowY: 'auto',
        }"
      >
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout-content>
</template>

<script setup lang="ts">
import { UserOutlined } from '@ant-design/icons-vue';
import { onMounted, ref } from 'vue';
import router from '@/router';
import { useRouter } from 'vue-router';

const routerArr = ref<any[]>([]);
onMounted(() => {
  getList();
});
const getList = () => {
  routerArr.value = (router as any).options.routes[0].children[0].children;
};
const routerx = useRouter();
const menuClick = ({ key }: { key: string }) => {
  const idx = (key.at(-1) as unknown) as number;
  if (idx) {
    const path = routerArr.value[idx].path;
    routerx.push(path);
  }
};
const selectedKeys2 = ref<string[]>(['sub0']);
const openKeys = ref<string[]>(['sub1']);
</script>

<style scoped></style>
